
<template>
    <div class="scrollbar routerview">
      <div class="innerBox" v-if="!isHide">
        <div class="headerBox">
            <el-input
            class="search"
            placeholder="搜索仓库名称"
            prefix-icon="el-icon-search"
            clearable
            @change="searchData"
            v-model="moreSearch.name">
            </el-input>
            <el-select v-model="moreSearch.isEnable" clearable placeholder="是否启用" class="search" @change="searchData">
            <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
            </el-select>
            <el-button type="primary"  @click="searchData" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" @click="resetData" icon="el-icon-refresh-right">重置</el-button>
            <el-button type="primary" @click.native="handleAdd" icon="el-icon-edit" v-permission="'add'">新增</el-button>
        </div>
        <div class="bodyBox">
            <el-table
            :data="queryFlag?queryData.slice((currentpage-1)*pagesize,currentpage*pagesize):list.slice((currentpage-1)*pagesize,currentpage*pagesize)"
            tooltip-effect="dark"
            :header-cell-style="{background:'#f5f7fa',color:'#606266',width:'100%'}"
            style="width: 100%"
            height="100%"
            max-height="70vh"
            border
            :key="key"
            >
            <el-table-column
            type="index"
            label="序号"
            width="50">
            </el-table-column>
            <el-table-column
            prop="objectId"
            label="仓库ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop="name"
            label="仓库名"
            width="130">
            </el-table-column>
            <el-table-column
            prop="upperlimit"
            label="当前存储"
            sortable
            width="120">
            </el-table-column>
            <el-table-column
            prop="storageTotal"
            label="存储总量"
            sortable
            width="120">
            </el-table-column>
             <el-table-column
            prop="name"
            label="库存盘点"
            width="150">
                <template slot-scope="scope">
                 <el-link type="primary" :underline="false" @click="openRouterQueryData('storage',scope.row.objectId,'stockInManageView')">
                   库存盘点</el-link>
                </template>
            </el-table-column>
            <el-table-column
            prop="isEnable"
            label="状态"
            sortable
            width="90">
            <template slot-scope="scope">
            <el-switch
            disabled
            v-model="scope.row.isEnable"
            active-color="#67C23A"
            inactive-color="#C0C4CC">
            </el-switch>
            </template>
            </el-table-column>
            <el-table-column
            prop="updatedAt"
            label="更新日期"
            sortable
            width="240">
            </el-table-column>
            <el-table-column
            prop="createdAt"
            label="创建日期"
            sortable
            min-width="200">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                <el-button
                size="mini"
                type="success" 
                plain
                v-permission="'update'"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               
                <template>
                <el-popconfirm
                title="是否删除该仓库？"
                style="margin-left:10px"
                v-permission="'delete'"
                @confirm="handleDelete(scope.$index, scope.row)"
                >
                <el-button
                size="mini"
                type="danger"
                slot="reference"
                :loading="scope.$index===deleteIndex"
                >删除</el-button>
                </el-popconfirm>
                </template>
                </template>
            </el-table-column>
            </el-table>
          </div>
        <div class="flootBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentpage"
                :page-sizes="[20, 50, 100]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryFlag?queryData.length:list.length">
            </el-pagination>
        </div>
        </div>
        <state-view :isShow='stateShow' :description='stateDescription' :image='stateImage' class="innerBox" @reload='resetPagerData'></state-view>
        <div v-loading.lock="isloading" class="layout-center" v-if="isloading" style="height: 100%;z-index:1"></div>
         <wareHouseDialog
            :Visible='dialogVisible' 
            v-if="dialogVisible"
            :editMark='editMark'
            :listData='listData'
            @save='resetLoadData'
            @close='dialogVisible=false'>
        </wareHouseDialog>
    </div>
</template>

<script>
import { common } from '@/mixin/common'
import wareHouseDialog from '@/components/dialog/wareHouseDialog'
export default {
  name: 'farmManageView',
  components: { wareHouseDialog },
  props: {
    isFinish:{
        type:Boolean,
        default:false
    }
  },
  mixins:[common],
  data () {
    return {
       menuname:'仓库管理',
        options2: [
          {
            value:'0',
            label:'未启用'
          },
          {
            value:'1',
            label:'启用'
          }
        ],//下拉框数据
        moreSearch:{

        },
        deleteIndex:-1,
        dialogVisible:false,
        editMark:false,
        listData:{}

    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    getData(time){
        this.timer=setTimeout(() => {
        this.$http.getAllData(this,'wareHouse').then(data=>{
            //成功回调
            clearTimeout(this.timer)
            this.successHandle()
            this.list=data
            this.queryFlag?this.searchData():null
        }).catch(error=>{
            //失败回调
            clearTimeout(this.timer)
            this.errorHandle()
        })
    }, time);
    },

  handleAdd(){
      this.editMark = false
      this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
  },
  handleEdit(index, rowlist){
      this.dialogVisible?this.dialogVisible=false:this.dialogVisible=true
      this.listData = JSON.parse(JSON.stringify(rowlist))
      this.editMark = true
  },
  handleDelete(index,rowlist){
    this.deleteIndex=index
      this.$http.deleteData(this,rowlist.objectId,'wareHouse').then(success=>{
          if(this.queryFlag){
              this.queryData.splice(index,1)
          }else{
              this.list.splice(index,1)
          }
          this.deleteIndex=-1
      },err=>{
        this.deleteIndex=-1
      })
  },
 
  searchData(){
    this.queryFlag=true
    this.currentpage=1
    this.pagesize=20
    this.key++
    this.queryData=this.multiFilter(this.list,this.moreSearch)
  },
   multiFilter(array,filters){
       const filterKeys = Object.keys(filters)
       return array.filter(item=>{
         return filterKeys.every(key=>{
           if(!filters[key]) return true
           return filters[key]==item[key]
         })
       })
    },
    resetData(){
        this.queryFlag=false
        this.queryData.length=0
        Object.keys(this.moreSearch).map(key => this.moreSearch[key] = '')
        this.isHide=true
        this.isloading=true
        this.checkUserVerified().then(res=>{
            if(res) this.checkUserPermission()
        })
    },
    openRouterQueryData(field,id,pathName){
      this.$router.push({
        name:pathName,
        query:{
          type:field,
          typeid:id
        }
      })
    },
  }
}

</script>
<style lang='scss' scoped>

.headerBox {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    [class*="el"] {
        height: 40px;
        margin: 5px;
        text-align: center;
    }
}

/deep/.el-input__inner,.el-input{
    flex-basis: 230px;
}

/deep/.cell {
    text-align: center;
     white-space: nowrap;
}
.bodyBox {
    margin: 15px 5px;
}

.flootBox {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>
